<template>
  <div class="container">
    <div class="echart-container">
      <div ref="echartsBox" class="echarts-box" style="height: 300px; width: 800px"></div>
    </div>
  </div>
</template>

<script>
  import commomOption from '../components/commomOption.js';
  import * as echarts from 'echarts';
  const globalOptions = {
    barWidth: 30, // 全局柱子宽度
    colors: [
      'rgba(48,228,255,1)',
      'rgba(255,0,0,1)',
      'rgba(0,255,0,1)',
      'rgba(0,0,255,1)',
      'rgba(255,255,0,1)',
      'rgba(255,0,255,1)',
      'rgba(0,255,255,1)',
    ],
    backgroundColors: [
      'rgba(48,228,255,0.4)',
      'rgba(255,0,0,0.4)',
      'rgba(0,255,0,0.4)',
      'rgba(0,0,255,0.4)',
      'rgba(255,255,0,0.4)',
      'rgba(255,0,255,0.4)',
      'rgba(0,255,255,0.4)',
    ],
    shadowColor: '#0D7DA3',
    shadowOpacity: 0.7,
  };
  export default {
    props: {
      data: {
        default: () => {
          return {
            xMonthTicket: [],
            lineData: [[]],
          };
        },
        typeof: Object,
      },
    },
    data() {
      return {
        myChart: null,
      };
    },

    watch: {
      data: {
        handler() {
          const series = [
            {
              // 真实数据
              data: [
                {
                  value: 70,
                  itemStyle: {
                    color: globalOptions.colors[0],
                  },
                },
                { value: 100, itemStyle: { color: globalOptions.colors[1] } },
                { value: 200, itemStyle: { color: globalOptions.colors[2] } },
                { value: 230, itemStyle: { color: globalOptions.colors[3] } },
                { value: 200, itemStyle: { color: globalOptions.colors[4] } },
                { value: 400, itemStyle: { color: globalOptions.colors[5] } },
                { value: 270, itemStyle: { color: globalOptions.colors[6] } },
              ],
              name: '顶部圆片 （柱形图顶部）',
              type: 'pictorialBar',
              symbolSize: [globalOptions.barWidth, 10],
              symbolOffset: [0, -5],
              z: 12,
              itemStyle: {
                color: globalOptions.colors[0],
              },
              symbolPosition: 'end',
            },
            {
              name: '真实数据柱形图',
              type: 'pictorialBar',
              symbolSize: [globalOptions.barWidth, 6],
              symbolOffset: [0, 3],
              z: 12,
              itemStyle: {
                color: globalOptions.colors[0],
              },
              data: [
                { value: 120, itemStyle: { color: globalOptions.colors[0] } },
                { value: 200, itemStyle: { color: globalOptions.colors[1] } },
                { value: 200, itemStyle: { color: globalOptions.colors[2] } },
                { value: 230, itemStyle: { color: globalOptions.colors[3] } },
                { value: 100, itemStyle: { color: globalOptions.colors[4] } },
                { value: 400, itemStyle: { color: globalOptions.colors[5] } },
                { value: 270, itemStyle: { color: globalOptions.colors[6] } },
              ],
            },
            {
              name: '底部圆片（柱形图底部）',
              type: 'bar',
              itemStyle: {},
              z: 16,
              silent: true,
              barWidth: globalOptions.barWidth,
              barGap: '-100%',
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(20,82,130, 0.4)',
              },
              data: [
                {
                  value: 70,
                  itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      // 这里 offset: 0 1 ,表示从下往上的渐变色
                      {
                        offset: 0, // 0%处的颜色
                        color: 'rgba(111,111,111,.1)',
                      },
                      {
                        offset: 0.5, // 0%处的颜色
                        color: 'rgba(11,111,111,.1)',
                      },
                      {
                        offset: 1, // 100%处的颜色
                        color: 'rgba(0,229,255,1)',
                      },
                    ]),
                  },
                },
                { value: 100, itemStyle: { color: globalOptions.backgroundColors[1] } },
                { value: 200, itemStyle: { color: globalOptions.backgroundColors[2] } },
                { value: 230, itemStyle: { color: globalOptions.backgroundColors[3] } },
                { value: 200, itemStyle: { color: globalOptions.backgroundColors[4] } },
                { value: 400, itemStyle: { color: globalOptions.backgroundColors[5] } },
                { value: 270, itemStyle: { color: globalOptions.backgroundColors[6] } },
              ],
            },
            {
              name: '最顶部圆片',
              type: 'pictorialBar',
              symbolSize: [globalOptions.barWidth, 15],
              symbolOffset: [0, -10],
              z: 3,
              symbolPosition: 'end',
              itemStyle: {
                color: globalOptions.shadowColor,
                opacity: globalOptions.shadowOpacity,
              },
              data: [
                { value: 500, itemStyle: { color: globalOptions.shadowColor } },
                { value: 500, itemStyle: { color: globalOptions.shadowColor } },
                { value: 500, itemStyle: { color: globalOptions.shadowColor } },
                { value: 500, itemStyle: { color: globalOptions.shadowColor } },
                { value: 500, itemStyle: { color: globalOptions.shadowColor } },
                { value: 500, itemStyle: { color: globalOptions.shadowColor } },
                { value: 500, itemStyle: { color: globalOptions.shadowColor } },
              ],
            },
          ];

          const option = {
            tooltip: {
              trigger: 'axis',
            },
            grid: commomOption.grid,
            // legend: commomOption.legend,
            xAxis: Object.assign({}, commomOption.xAxis, {
              data: this.data.xMonthTicket,
              axisLabel: {
                interval: 0, // 显示所有刻度
              },
            }),
            yAxis: [
              {
                type: 'value',
                max: 1000,
                ...commomOption.yAxis,
              },
              {
                type: 'value',
                min: 0,
                max: 2,
                axisLabel: {
                  show: true,
                  interval: 'auto',
                  color: 'rgb(255, 255, 255)',
                  formatter: '{value}%',
                },
              },
            ],
            series: series,
          };
          this.echartInit(option);
        },
        immediate: true,
      },
    },
    methods: {
      // echarts初始化
      echartInit(option) {
        if (this.myChart) {
          this.myChart.setOption(option);
          return false;
        }

        this.$nextTick(() => {
          this.myChart = echarts.init(this.$refs.echartsBox);

          option && this.myChart.setOption(option);
          // 根据页面大小自动响应图表大小
          window.addEventListener('resize', () => {
            this.myChart.resize();
          });
        });
      },
    },
  };
</script>
<style lang="less" scoped></style>
